<template>
  <div class="container">
    <div class="header-bar">
      <div class="left">官方微信公众号</div>
      <el-button @click="submit" type="primary" size="small">
        保存信息
      </el-button>
    </div>
    <el-form :model="form" ref="vipform" label-width="100px">
      <el-form-item label="微信头像">
        <img
          style="width:60px;height:60px;object-fit:cover; border-radius:50%;"
          v-if="form.avatar"
          :src="form.avatar"
          alt=""
        />
        <label class="upload-btn" for="avatar-uploads">
          点击上传
          <input
            type="file"
            id="avatar-uploads"
            @change="selectImg1"
            style="position:absolute; clip:rect(0 0 0 0);"
            accept="image/*"
          />
        </label>
      </el-form-item>
      <el-form-item label="二维码">
        <img
          style="width:200px;height:200px;object-fit:cover;"
          v-if="form.qrcode"
          :src="form.qrcode"
          alt=""
        />
        <label class="upload-btn" for="qrcode-uploads">
          点击上传
          <input
            type="file"
            id="qrcode-uploads"
            @change="selectImg"
            style="position:absolute; clip:rect(0 0 0 0);"
            accept="image/*"
          />
        </label>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fileUpload } from "@/api/file";
import { getVipTeacher, setVipTeacher } from "@/api/user-mng";
export default {
  data() {
    return {
      form: {
        avatar: null,
        qrcode: null
      }
    };
  },

  computed: {},

  watch: {},

  methods: {
    submit() {
      setVipTeacher({ avatar: this.form.avatar, image: this.form.qrcode }).then(
        res => {
          if (res.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
          }
        }
      );
    },
    selectImg(e) {
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      fileUpload(formData).then(res => {
        if (res.code === 200) {
          this.form.qrcode = res.data.file;
        }
      });
    },
    selectImg1(e) {
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      fileUpload(formData).then(res => {
        if (res.code === 200) {
          this.form.avatar = res.data.file;
        }
      });
    }
  },

  created() {
    getVipTeacher().then(res => {
      if (res.code === 200) {
        this.form.avatar = res.data.avatar;
        this.form.qrcode = res.data.image;
      }
    });
  },

  components: {}
};
</script>
<style lang="scss" scoped>
.container {
  .header-bar {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
    padding: 10px 0;
    align-items: center;
  }
  .upload-btn {
    border: 1px solid #888888;
    padding: 5px 10px;
  }
}
</style>
